<template>
  <div ref="gauge"
       class="charts chart-gauge"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
    name: 'ChartGuage',
    props: {
        value: String,
        name: String
    },
    mounted () {
        let dom = echarts.init(this.$refs.gauge)
        this.$nextTick(() => {
            let option = {
                tooltip: {
                    formatter: '{a} <br/>{c} {b}'
                },
                series: [
                    {
                        name: this.name,
                        type: 'gauge',
                        min: 0,
                        max: 100,
                        splitNumber: 10,
                        radius: '96%',
                        axisLine: {
                            // 坐标轴线
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: [
                                    [0.3, '#FF4500'],
                                    [0.6, '#FFA500'],
                                    [0.9, '#00FF7F'],
                                    [1, '#fff']
                                ],

                                width: 10,
                                shadowColor: '#fff', // 默认透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {
                            // 坐标轴小标记
                            textStyle: {
                                // 属性lineStyle控制线条样式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor: '#fff', // 默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {
                            // 坐标轴小标记
                            length: 15, // 属性length控制线长
                            lineStyle: {
                                // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor: '#fff', // 默认透明
                                shadowBlur: 10
                            }
                        },
                        splitLine: {
                            // 分隔线
                            length: 30, // 属性length控制线长
                            lineStyle: {
                                // 属性lineStyle（详见lineStyle）控制线条样式
                                width: 3,
                                color: '#fff',
                                shadowColor: '#fff', // 默认透明
                                shadowBlur: 10
                            }
                        },
                        pointer: {
                            // 分隔线
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 5
                        },
                        title: {
                            textStyle: {
                                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize: 20,
                                fontStyle: 'italic',
                                color: '#fff',
                                shadowColor: '#fff', // 默认透明
                                shadowBlur: 10
                            }
                        },
                        detail: {
                            backgroundColor: 'rgba(30,144,255,0.8)',
                            borderWidth: 1,
                            borderColor: '#fff',
                            shadowColor: '#fff', // 默认透明
                            shadowBlur: 5,
                            formatter: function (value) {
                                return value.toFixed(0) + '%'
              },
                            offsetCenter: [0, '40%'], // x, y，单位px
                            textStyle: {
                                // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                fontWeight: 'bolder',
                                color: '#fff',
                                fontSize: 18
                            }
                        },
                        data: [{ value: this.value }]
                    }
                ]
            }

            dom.setOption(option)
        })
    }
}
</script>

<style lang="less">
.chart-gauge {
	min-height: 220px;
}
</style>
